<template>
  <div class="main">
    <a-row type="flex" justify="center">
      <a-col class="main-inner" :span="18">
        <!--     主体     -->
        <a-row class="tool-line">
          <a-button type="primary" @click="handleOpenAddModal">新增部门</a-button>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-table :pagination="false" :loading="isLoading" :dataSource="dataSource" :columns="columns" bordered>
              <template #bodyCell="{ column, text, record }">
                <template v-if="column.dataIndex === 'operation'">
                  <a-space>
                    <a-button type="primary" @click="handleEdit(record)">修改</a-button>
                    <a-button type="primary" @click="handleDelete(record)" danger>删除</a-button>
                  </a-space>
                </template>
              </template>
            </a-table>
          </a-col>
        </a-row>
      </a-col>
    </a-row>
  </div>

</template>

<script setup lang="ts">
import {columns, dataSource, departStore} from './config'
import {inject, onMounted, ref} from "vue";
import {IListItem} from "@/views/Home/Main/types";

// 初始化
const isLoading = ref(true)
onMounted(async () => {
  await departStore.requestDepartListAction()
  isLoading.value = false
})

/* 新增 */
const handleOpenAddModal = inject("handleOpenAddModal")
/* 删除 */
const handleDelete = async (record: IListItem) => {
  departStore.deleteDepartAction({
    id: record.ID
  })
}
/* 修改 */
const handleOpenEditModal = inject("handleOpenEditModal") as Function
const emit = defineEmits(["update:currentItem"])
const handleEdit = async (record: IListItem) => {
  emit("update:currentItem", record)
  handleOpenEditModal()
}
</script>

<style lang="less" scoped>
.main {
  margin-top: 20px;

  .main-inner {
    border: 2px solid #f2f2f2;
    padding: 20px;

    .tool-line {
      margin-bottom: 20px;
    }
  }
}
</style>
